<template>
	<view>
		<!-- 最外面的盒子 -->
		<view class="bigbox">
			<!-- 1字的盒子 -->
			<view class="zhongbox1" v-for="item in addressList" :key="item.id" @click="fb(item.id)">
				<view class="libox-left floatl">
					<view class="libox-left-shang">{{item.linkMan}} {{item.mobile}} </view>
					<view class="libox-left-xia"> {{item.provinceStr}}{{item.cityStr}}{{item.areaStr}}{{item.address}}
					</view>
				</view>
				<view class="libox-right floatl">
					<view class="libox-right-tu">
						<view class="libox-right-tu1">
							<u-icon name="edit-pen"></u-icon>
						</view>
					</view>
				</view> 
			</view>

			<!-- 第2个的盒子 -->
			<view class="zhongbox2">

				<view class="flexdbox"  v-for="item in addressList" :key="item.id">
					<view class="xinzbox"  @click="fn">
							<text>+ 新建收货地址 </text>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		_address
	} from "../../api/address.js"
	export default {
		data() {
			return {
				addressList: []
			}
		},
		methods: {
			getAddressList() {
				_address().then(res => {
					console.log(res,1111)
					if (res.code === 0) {
						this.addressList = res.data.result;
						
					}
				})
			},
			fb(id){
				uni.navigateTo({
					url:"/pages/address-edit/address-edit?id="+id
				})
			},
			fn() {
				console.log(123)
				uni.navigateTo({
					url:"/pages/address-edit/address-edit"
				})
			}
		},
		onReady() {
			this.getAddressList()
		}
	}
</script>

<style>
	.bigbox {
		width: 750rpx;
		width: 100%;
		height: 304rpx;
		height: 100%;
		background-color: aqua;
		padding: 20rpx;
		background-color: #f7f8fa;
		position: fixed;
		position: relative;
	}

	.floatl {
		float: left;
	}

	.zhongbox1 {
		width: 710rpx;
		height: 144rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: white;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.libox-left {
		width: 574rpx;
		height: 96rpx;
		/* background-color: green; */
	}

	.libox-left-shang {
		width: 574rpx;
		height: 44rpx;
		/* background-color: pink; */
		margin-bottom: 8rpx;
		font-size: 30rpx;
		line-height: 44rpx;
	}

	.libox-left-xia {
		width: 574rpx;
		height: 36rpx;
		/* background-color: pink; */
		font-size: 20rpx;
		line-height: 36rpx;
	}

	.libox-right {
		width: 88rpx;
		height: 96rpx;
		/* background-color: yellow; */
	}

	.libox-right-tu {
		width: 88rpx;
		height: 16rpx;
		margin: 35rpx auto;
	}

	.libox-right-tu1 {
		width: 16rpx;
		height: 16rpx;
		/* background-color: white; */
		margin-left: 36rpx;
	}



	.zhongbox2 {
		width: 710rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f7f8fa;
		border-radius: 10rpx;
	}

	.flexdbox {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		right: 0rpx;
	}

	.xinzbox {
		width: 600rpx;
		height: 72rpx;
		margin: 18rpx auto;
		background-color: #1ba784;
		border-radius: 50rpx;
		border: 1rpx solid #1ba784;
		
		text-align: center;
		line-height: 72rpx;
		font-size: 30rpx;
		color: white;
	}
</style>
